<template>
    <van-list :loading="loading" :finished="finish" :finished-text="'没有更多了'" @load="loadData">
        <div v-for="item in data" :key="item.id" class="mb-2">
            <div class="border bg-white rounded px-6 py-2 text-sm">
                <div class="flex justify-between items-center">
                    <div>编号：<span>{{ item.id }}</span></div>
                    <div class="my-1">系统单号：{{ item.orderNo }}</div>
                    <div>类型：<van-tag plain type="primary">{{ item.className }}</van-tag></div>
                </div>
                <div>
                    <div class="flex justify-between items-center my-2">
                        <van-tag type="danger">执行金额{{ item.money }}</van-tag>
                        <van-tag type="primary">执行前{{ item.beforeMoney }}</van-tag>
                        <van-tag type="success">执行后{{ item.afterMoney }}</van-tag>
                    </div>

                    
                    <div class="my-1 text-xs text-gray-400">{{ item.remark }}</div>
                </div>
                <div class="text-gray-500">
                    <div>IP：{{ item.ip }}</div>
                    <div>创建时间：{{ dayjs(item.create_time * 1000).format('YYYY/MM/DD HH:mm:ss') }}</div>
                </div>
            </div>
        </div>
    </van-list>
</template>
<script setup lang="ts">
import { GetAccountChangeApi } from '@/apis/user';
import dayjs from 'dayjs';
import { ref, watch } from 'vue';
const props = defineProps({
    dateTime: {
        type: Array,
        default: () => []
    }
})

const page = ref(1);
const data = ref([]);
const loading = ref(false);
const finish = ref(false);

function loadData() {
    loading.value = true;
    finish.value = false;
    GetAccountChangeApi({
        page: page.value,
        dateTime: props.dateTime
    }).then(res => {
        if (res.list.length > 0) {
            data.value = data.value.concat(res.list);
            page.value++;
        } else {
            finish.value = true;
        }
    }).finally(() => {
        loading.value = false;
    })
}

watch(() => props.dateTime, () => {
    page.value = 1;
    data.value = [];
    loadData();
})
</script>